<template>
	
		<view class="uni-padding-warp uni-common-mt">
			<view class="uni-title uni-common-mt"> 默认样式 </view>
			<view>
				<checkbox-group>
					<checkbox value="cb1" checked="true" />选中
					<checkbox value="cb" />未选中
					</checkbox-group>
			</view>
			
			<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
			<view>
				<checkbox-group>
					<label style="background-color: #8A6DE9;">
						
						<checkbox value="cb1" checked="true" style="transform: scale(0.7);"/>选中
						</label>
						<label>
						<checkbox value="cb" style="transform: scale(0.7);"/>未选中
					
					</label>
				</checkbox-group>
		</view>
	</view>
	
	<view class="uni-title uni-common-mt">推荐展示样式</view>
	<view class="uni-list">
		<checkbox-group @change="checkboxChange">
			<label
				        class="uni-list-cell uni-list-cell-pd" 
				        v-for="(item, index) in items" 
				        :key="item.value"
				        :style="{
				          backgroundColor: item.color,  // 使用每个选项的自定义颜色
				          padding: '12px 16px',
				          marginBottom: '8px',
				          borderRadius: '6px',
				          display: 'flex',
				          alignItems: 'center',
				          transition: 'all 0.3s ease'
				        }"
				      >
				        <view style="margin-right: 12px;">
				          <checkbox :value="item.value" :checked="item.checked" />
				        </view>
				        <view style="color: #333; font-size: 16px;">{{ item.name }}</view>
				      </label>
				    </checkbox-group>
				  </view>
			</template>
	
<script setup>
	import { ref } from 'vue';
	
	const items = ref([
	  { value: 'football', name: '美国', checked: false ,color: '#e6f7ff'},
	  { value: 'basketball', name: '中国', checked: true ,color: '#e6f7ff'},
	  { value: 'volleyball', name: '巴西', checked: false ,color: '#e6f7ff'},
	  { value: 'volleyball', name: '日本', checked: false ,color: '#e6f7ff'},
	  { value: 'volleyball', name: '英国', checked: false ,color: '#e6f7ff'},
	  { value: 'volleyball', name: '法国', checked: false ,color: '#e6f7ff'}
	]);
	const checkboxChange = (e) => {
	  const values = e.detail.value;
	  items.value.forEach((item) => {
	    if (values.indexOf(item.value) >= 0) {
	      item.checked = true;
	    } else {
	      item.checked = false;
	    }
	    console.log(
	      'name:' +
	        item.name +
	        ',index:' +
	        values.indexOf(item.value) +
	        ',isCheck:' +
	        item.checked
	    );
	  });
	};
</script>

<style>
	       
</style>
